<template>
  <div class="shebao-detail-list">
    <a-button icon="left" type="link" @click="$router.go(-1)">返回</a-button>
    <a-row class="content-top">
      <!-- <step :current="0" /> -->
    </a-row>
    <navItem :options="tabs" @change="handleNav" />
    <!-- table -->
    <a-table
      :row-key="(a, b) => a.id"
      :scroll="custom.length ? { x: 1600 + customList.length * 140 } : {}"
      :columns="column"
      class="mg_t24"
      list-type="picture"
      :pagination="pagination"
      :data-source="dataSource"
      @change="handlePage"
    >
      <template slot="customName" slot-scope="text, record">
        <img v-if="record.noError" style="width: 24px" src="@/assets/img/shebaopaidan/Info2@2x.png" alt="" />
        <img v-else style="width: 24px" src="@/assets/img/shebaopaidan/Info-Circle@2x.png" alt="" />
        {{ record.name }}
      </template>
      <template slot="socProgName" slot-scope="text, record">
        <span :style="hasPaidan(record.socProgName) ? '' : 'color:red'">{{ record.socProgName }}</span>
      </template>
      <template slot="socStartDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>
      <template slot="fundStartDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>
      <template slot="assignCompanyName" slot-scope="text, record">
        <span class="primary">{{ record.noError ? record.assignCompanyName : "--" }}</span>
      </template>
      <template v-for="(item, i) in custom" :slot="item.dataIndex" slot-scope="record">
        <span :key="i" :style="record.error ? '' : 'color:red'">{{ record.value }}</span>
      </template>
      <template slot="action" slot-scope="record">
        <span class="primary" @click="deleteItem(record)">删除</span>
      </template>
    </a-table>
    <a-row class="foot">
      <a-button type="primary" @click="reUpload">重新上传</a-button>
      <a-button @click="doNext">下一步</a-button>
    </a-row>
  </div>
</template>

<script>
const column = [
  {
    title: "姓名",
    dataIndex: "name",
    fixed: "left",
    scopedSlots: { customRender: "customName" }
  },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  {
    title: "参保方案",
    dataIndex: "socProgName",
    scopedSlots: { customRender: "socProgName" }
  }
];
const endList = [
  {
    title: "社保起缴时间",
    dataIndex: "socStartDate",
    scopedSlots: { customRender: "socStartDate" }
  },
  {
    title: "住房公积金起缴时间",
    dataIndex: "fundStartDate",
    scopedSlots: { customRender: "fundStartDate" }
  },
  {
    title: "指派公司",
    dataIndex: "assignCompanyName",
    scopedSlots: { customRender: "assignCompanyName" }
  },
  { title: "操作", dataIndex: "", scopedSlots: { customRender: "action" } }
];
import step from "./common/step";
import navItem from "./common/nav-item2";
export default {
  name: "ShebaoDetailList",
  components: {
    // step,
    navItem
  },
  data: function () {
    return {
      custom: [],
      tabs: {},
      params: {
        pageSize: 10,
        pageNo: 1
      },
      column,
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      titles: {},
      dataSource: [],
      progList: [],
      customList: []
    };
  },
  created() {
    this.getList();
    this.getNavs();
    this.getcbList();
  },
  methods: {
    // 获取参保方案
    getcbList() {
      this.$request({ url: `/hr/api/v1/socProgs/listAllRelation` }).then(({ data }) => {
        this.progList = data;
      });
    },
    hasPaidan(name) {
      return this.progList.find((item) => item.progName === name);
    },
    getList() {
      const url = `/hr/api/v1/socDispatchEmpAdds`;
      this.$request({
        url,
        params: {
          ...this.params,
          socDispatchId: this.$route.query.id,
          showItem: true
        }
      }).then(({ data }) => {
        this.dataSource = data.entities;
        this.pagination.total = data.entityCount;
        if (this.dataSource.length) {
          const socDispatchEmpItemList = this.dataSource[0].socDispatchEmpItemList || [];
          if (!this.customList.length) {
            this.custom = this.customList = socDispatchEmpItemList.map((item) => {
              item.sort = item.sort.toString();
              return {
                title: item.itemName,
                dataIndex: item.itemName.toString(),
                scopedSlots: { customRender: item.itemName.toString() }
              };
            });
            this.column = [...this.column, ...this.customList, ...endList];
          }
        }
        this.dataSource.forEach((item) => {
          const d = [];
          if (item.socDispatchEmpItemList) {
            item.socDispatchEmpItemList.map((s) => {
              d.push({
                [s.itemName.toString()]: {
                  value: s.cardinalityPerson,
                  error: s.noError
                }
              });
            });
          }
          Object.assign(item, ...d);
        });
      });
    },
    getNavs() {
      this.$request({
        url: `/hr/api/v1/socDispatches/findDetails/${this.$route.query.id}`
      }).then(({ data }) => {
        this.tabs = data;
      });
    },
    selectItem(e) {},
    handlePage({ current }) {
      this.params.pageNo = current;
      this.getList();
    },
    handleNav(e) {},
    // 删除item
    deleteItem({ id }) {
      this.$confirm({
        title: "确定删除?",
        okType: "danger",
        onOk: () => {
          this.$request({
            url: `/hr/api/v1/socDispatchEmpAdds/${id}`,
            method: "delete"
          }).then(({ success }) => {
            if (success) {
              this.$notification["success"]({ message: "删除成功" });
              this.getList();
              this.getNavs();
            }
          });
        }
      });
    },
    // 重新上传
    reUpload() {
      this.$router.push("/shebao/shebaoPaidan/shebaoUpload");
    },
    // 下一页
    doNext() {
      const path =
        this.$route.query.addOrLess.toString() === "true"
          ? "/shebao/shebaoPaidan/shebao-detail-add-second"
          : `/shebao/shebaoPaidan/shebao-detail-add-second-less`;
      this.$router.push({
        path,
        query: { ...this.$route.query }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-top {
  margin-top: 24px;
  padding: 40px 25%;
  background: #fafafa;
  border-radius: 4px;
}
.shebao-detail-list {
  padding: 24px;

  .foot {
    height: 64px;
    line-height: 64px;
    text-align: end;
  }
}
</style>
